<template>
    <div class="quiz">
        <el-table v-loading="loading" :data="tableData" border stripe style="width: 60%">
            <el-table-column type="index" label="序号" width="150"></el-table-column>
            <el-table-column prop="username" label="学生姓名" width="150"></el-table-column>
            <el-table-column prop="quizTitle" label="实验名称" width="150"></el-table-column>
            <el-table-column prop="answer" label="答案" width="150"></el-table-column>
            <el-table-column prop="score" label="结论分数" width="150"></el-table-column>
            <el-table-column prop="performance.score" label="表现分数" width="150"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" icon="el-icon-s-operation" @click="handleClick(scope.row)">编辑分数</el-button>
                </template>
            </el-table-column>

            <el-dialog title="分数" :visible.sync="dialogFormVisible" :append-to-body="true">
            <el-form :model="form">
                <el-form-item label="结论分数" :label-width="formLabelWidth">
                <el-input v-model="form.score" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="表现分数" :label-width="formLabelWidth">
                <el-input v-if="form.performance" v-model="form.performance.score" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateScore()">确 定</el-button>
            </div>
            </el-dialog>
        </el-table>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 50, 100]"
        :page-size="param.pageSize"
        layout="total, prev, pager, next"
        :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
    data() {
        return {
            loading: false,
            tableData: [],
            total: 0,
            param: {
                pageSize: 5,
                pageNo: 1
            },
            dialogFormVisible: false,
            form: {},
            formLabelWidth: '120px'
    
        }
    },
    created() {
        
    },
    mounted() {
        this.getByPage()
    },
    methods: {
        getByPage() {
            let url = '/conclusion/getByPage'
            this.loading = true
            this.$http.post(url,this.param).then(data => {
                this.loading = false
                debugger
                if (data.data.success === true) {
                    // localStorage.username = data.data.userName;
                    this.tableData = data.data.data.records
                    this.total = data.data.data.total
                } else {
                    this.$message.error(data.message);
                }
            }).catch(() => {
                this.loading = false
            })
        },
        // TODO 跳转详情
        handleClick(row) {
            this.form = row
            debugger
            this.dialogFormVisible = true
            this.$forceUpdate()
        },
        updateScore() {
            if(this.form.score > 20) {
                this.$message.error('结论满分20');
                return
            }
             if(this.form.score > 10) {
                this.$message.error('表现满分10');
                return
            }
            this.$http.post("/conclusion/updateScore?id=" + this.form.id + "&score=" + this.form.score, this.form.performance, {}).then(({body}) => {
                if (body.success === true) {
                    this.getByPage();
                    this.$message.success(body.message);
                    window.location.reload();
                } else {
                    this.$message.error(body.message);
                }
            }).catch(() => {
                this.$message.error('删除失败');
            })
            this.dialogFormVisible = false
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.getByPage()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.getByPage()
        }
    }
}
</script>

<style>
.quiz {
    padding: 10px 10px;
    background: #fff;
}
</style>
